<template>
  <div class="ndetails" ref="mianHeight">
    <div class="detailsTop">
      <h2>{{detail.title}}</h2>
      <p class="synopsis">
        <span>
          通知类型:
          <em>{{detail.typeName}}</em>
        </span>
        <span>
          发布部门:
          {{detail.pubDeptName}}
        </span>
        <span>发布人:{{detail.pubUserName}}</span>
        <span>发布时间:{{detail.pubTime}}</span>
      </p>
    </div>

    <div class="messageBox" :style="{height:scHeight}">
      <div class="ql-container ql-snow" style="border:none">
        <div class="ql-editor">
          <div class="messageBoxN" v-html="detail.content" id="messageBoxN"></div>
        </div>
      </div>
      <div class="suspensionBts">
        <el-tooltip class="item" effect="dark" content="分享转发" placement="right">
          <a @click="openLayer">
            <i class="el-icon-share"></i>
          </a>
        </el-tooltip>
        <el-badge v-if="type=='send'" :value="detail.readCount+'/'+detail.allCount" class="item">
          <el-tooltip class="item" effect="dark" content="查阅情况" placement="right">
            <a v-popover:popover1>
              <i class="el-icon-view"></i>
            </a>
          </el-tooltip>
        </el-badge>
        <el-popover
          v-if="type=='send'"
          ref="popover1"
          placement="left-start"
          title="阅读情况详情"
          width="600"
          height="300"
          trigger="hover"
        >
          <div class="watchPeoList">
            <dl v-for="(item,index) in detail.noticeUserMap" :key="index">
              <dt>{{index}}</dt>
              <dd>
                <span
                  v-for="(item2,index2) in item"
                  :class="{wtd:item2.isRead}"
                  :key="index2"
                >{{item2.userName}}</span>
              </dd>
            </dl>
          </div>
        </el-popover>
        <el-tooltip class="item" effect="dark" content="删除" placement="right" v-if="type == 'send' && detail.delete">
          <a @click="detail_delete">
            <i class="el-icon-delete"></i>
          </a>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="删除" placement="right" v-if="type == 'receive'">
          <a @click="detail_delete">
            <i class="el-icon-delete"></i>
          </a>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="返回顶部" placement="right" v-show="topFlag">
          <a @click="backToTop">
            <i class="el-icon-upload2"></i>
          </a>
        </el-tooltip>
      </div>
    </div>
    <div class="fileBox">
      <h4 v-if="detail.fileInfos && detail.fileInfos.length != 0">
        <span>附件：</span>
      </h4>
      <div class="fileBoxList">
        <ul v-for="item in detail.fileInfos">
          <li>
            <a href="#" @click="download(item)">
              <i class="icon iconfont iconfile"></i>
              <span>{{item.fileName}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog title="接收人员" append-to-body :visible.sync="shareBox" width="800px">
      <div style="margin-left: 5px;float:left;margin-right:20px">
        <el-radio-group v-model="transType" size="small" @change="changeTransType">
          <el-radio-button label="1">所有人员</el-radio-button>
          <el-radio-button label="2">自定义组</el-radio-button>
        </el-radio-group>
      </div>
      <div style="padding-top: 4px;">
        <el-link icon="el-icon-edit" @click="jumpToCustom">管理自定义组</el-link>
        <i
          class="el-icon-refresh"
          @click="refresh"
          title="刷新自定义组"
          style="font-size: 16px;color: #409eff;cursor:pointer"
        ></i>
      </div>
      <div style="clear:both;"></div>
      <div class="transferBox">
        <div class="transfer">
          <div class="transfer-box transfer-left">
            <h3 class="transfer-title">
              <el-checkbox
                style="margin-right:0px"
                v-model="left.checkedAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
              ></el-checkbox>
              <span>{{ left.title }}</span>
              <el-select
                v-if="transType == '1'"
                v-model="selectbox.value"
                size="mini"
                style="float: right;margin-right: 20px;width: 170px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in selectbox.list"
                  :label="item.unitName"
                  :value="item.unitId"
                ></el-option>
              </el-select>
              <el-select
                v-else
                v-model="selectbox.value"
                size="mini"
                style="float: right;margin-right: 20px;width: 170px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in selectbox.list"
                  :label="item.groupName"
                  :value="item.groupId"
                ></el-option>
              </el-select>
            </h3>
            <div class="transfer-main">
              <!-- <slot name="from"></slot> -->
              <el-input
                v-model="left.search"
                clearable
                placeholder="请输入姓名/部门搜索"
                prefix-icon="el-icon-search"
                size="small"
                class="filter-input"
              ></el-input>
              <ul>
                <li v-for="item in searchDataLeft">
                  <el-checkbox
                    v-model="item.checked"
                    @change="left_change_one(item,item.userId,item.checked)"
                  >{{item.userName}} ({{item.unitName}} - {{item.deptName}})</el-checkbox>
                </li>
              </ul>
            </div>
          </div>
          <div class="toRight">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="transfer-box transfer-right">
            <h3 class="transfer-title">
              <span>{{ right.title }}</span>
              <span
                style="float:right;margin-right:20px;color:#6c6c6c;font-size:12px;cursor:pointer"
                @click="deleteAll()"
              >
                <i class="el-icon-delete"></i> 清空
              </span>
            </h3>
            <div class="transfer-main">
              <!-- <slot name="from"></slot> -->
              <el-input
                v-model="right.search"
                clearable
                placeholder="请输入关键字搜索"
                prefix-icon="el-icon-search"
                size="small"
                class="filter-input"
              ></el-input>
              <ul>
                <li v-for="item in searchData">
                  <p class="ellipsis">{{item.userName}} ({{item.unitName}} - {{item.deptName}})</p>
                  <a
                    class="deleteicon"
                    href="javascript:void(0)"
                    @click="right_delete(item.userId)"
                  >
                    <i class="el-icon-delete"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareBox = false">取 消</el-button>
        <el-button type="primary" @click="sendMessage" :loading="submitflag">转 发</el-button>
      </span>
    </el-dialog>
    <go-back></go-back>
  </div>
</template>

<script>
import goBack from "../../../components/vue/goBack";
export default {
  name: "ndetails",
  data() {
    return {
      id: null,
      submitflag: false,
      shareBox: false,
      scHeight: "",
      topFlag: false,
      detail: {
        fileInfos: [],
        noticeUserMap: [],
        allCount: 0,
        content: "",
        moduleUrl: "",
        noticeId: "",
        pubDeptName: "",
        pubTime: "",
        pubUserName: "",
        readCount: "",
        title: "",
        typeId: "",
        typeName: ""
      },
      newNoticeUserMap: [],
      newFileInfos: [],
      //********0002穿梭框开始***************
      isIndeterminate: false,
      jumpLink: "",
      transType: "1",
      selectbox: {
        //筛选框
        value: "",
        list: []
      },
      left: {
        //全部人员
        checkedAll: false,
        title: "所有人员",
        search: "",
        list: []
      },
      right: {
        //选中的人员
        checkedAll: false,
        title: "选中人员",
        search: "",
        list: [],
        selectIds: []
      }
      //*******0002穿梭框结束************
    };
  },
  props: { year: String, type: String },
  components: {
    goBack: goBack
  },
  //   ******0003穿梭框开始************
  computed: {
    //左侧过滤器
    searchDataLeft: function() {
      var search = this.left.search;
      if (search) {
        return this.left.list.filter(function(llist) {
          return Object.keys(llist).some(function(key) {
            if (key == "userName" || key == "deptName" || key == "unitName") {
            return (
              String(llist[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
            }
          });
        });
      }
      return this.left.list;
    },
    //右侧过滤器
    searchData: function() {
      var search = this.right.search;
      if (search) {
        return this.right.list.filter(function(rlist) {
          return Object.keys(rlist).some(function(key) {
            if (key == "userName" || key == "deptName" || key == "unitName") {
            return (
              String(rlist[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
            }
          });
        });
      }

      return this.right.list;
    }
  },
  watch: {
    "selectbox.value": function(n, o) {
      //监听下拉筛选
      if (n != o && n != "") {
        this.load_list(); //获取所有人员列表
      }
    },
    searchDataLeft: function(n, o) {
      if (n != o && n != "") {
        this.controlCheckAll();
      }
    }
  },
  //   ******0003穿梭框结束************
  methods: {
    //   **********0004穿梭框开始***************
    refresh() {
      //刷新
      this.getInfo();
    },
    getJumpLink() {
      let url = "/base/query/group/url";
      this.$ajax
        .post(url)
        .then(out => {
          this.hw_result(out.data, true, this, () => {
            this.jumpLink = out.data.result;
          });
        })
        .catch(error => {});
    },
    jumpToCustom() {
      window.open(this.jumpLink, "_blank");
    },
    changeTransType() {
      //切换tab
      this.getInfo();
    },
    getInfo() {
      //0001.获取 筛选框列表(有编辑时 选中人列表，选中人id列表，)
      this.selectbox.value = "";
      if (this.transType == "1") {
        //所有人员
        this.left.title = "所有人员";
        let url = "/base/query/units";
        this.$ajax
          .post(url)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              this.selectbox.value = "";
              this.selectbox.list = out.data.result;
              this.left.list = [];
              // 默认选中第一项
              this.selectbox.value = out.data.result[0].unitId;
            });
          })
          .catch(error => {});
      } else {
        //自定义组
        this.left.title = "自定义组";
        let url = "/base/query/group/list";
        this.$ajax
          .post(url)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              this.selectbox.value = "";
              this.selectbox.list = out.data.result;
              this.left.list = [];
              // 默认选中第一项
              this.selectbox.value = out.data.result[0].groupId;
            });
          })
          .catch(error => {});
        // this.selectbox.value = "";
        // this.selectbox.list = [
        //   { parentId: null, unitId: "1", unitName: "组1", unitType: "School" },
        //   { parentId: 1, unitId: "3", unitName: "组2", unitType: "School" }
        // ];
        // this.left.list = [];
      }
    },
    load_list() {
      if (this.transType == "1") {
        let unitType = "";
        for (let i = 0; i < this.selectbox.list.length; i++) {
          if (this.selectbox.value == this.selectbox.list[i].unitId) {
            unitType = this.selectbox.list[i].unitType;
          }
        }
        //0002.获取所有人员列表
        let url = "/base/query/users";
        let param = {
          unitId: this.selectbox.value,
          unitType: unitType
        };
        this.$ajax
          .post(url, param)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              let data = out.data.result;
              this.init_left(data); //初始化左侧所有人列表
            });
          })
          .catch(error => {});
      } else {
        //0002.获取所有人员列表
        let url = "/base/query/group/users";
        let param = {
          groupId: this.selectbox.value
        };
        this.$ajax
          .post(url, param)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              let data = out.data.result;
              this.init_left(data); //初始化左侧所有人列表
            });
          })
          .catch(error => {});
      }
    },
    init_left(leftList) {
      //0003初始化左侧所有人列表
      var arr = new Array();
      for (let i in leftList) {
        let s = leftList[i];
        if (this.right.selectIds.indexOf(s.userId) > -1) {
          s.checked = true;
        } else {
          s.checked = false;
        }
        arr.push(s);
      }
      this.left.list = arr;

      this.controlCheckAll();
    },
    controlCheckAll() {
      //0007控制全选按钮选中状态
      var checkedLength = 0;
      for (var i = 0; i < this.searchDataLeft.length; i++) {
        if (this.searchDataLeft[i].checked == true) {
          checkedLength++;
        }
      }
      if (checkedLength == this.searchDataLeft.length) {
        this.left.checkedAll = true;
      } else {
        this.left.checkedAll = false;
      }
    },
    left_change_one(item, id, checked) {
      this.controlCheckAll();
      //0004左边选择和不选择
      if (checked == false) {
        //取消选中时
        for (let i in this.right.list) {
          let u = this.right.list[i];
          if (u.userId == id) {
            this.right.list.splice(i, 1);
            this.right.selectIds.splice(i, 1);
          }
        }
      } else {
        this.right.list.push(item);
        this.right.selectIds.push(id);
      }
    },
    right_delete(id) {
      //0005右边删除时
      for (let i in this.right.list) {
        let u = this.right.list[i];
        if (u.userId == id) {
          this.right.list.splice(i, 1);
          this.right.selectIds.splice(i, 1);
        }
      }
      for (let i in this.left.list) {
        let u = this.left.list[i];
        if (u.userId == id) {
          u.checked = false;
        }
      }
      this.controlCheckAll();
    },
    deleteAll() {
      //0008右边清空时
      this.hw_confirm("您确定要清空吗？", () => {
        this.deleteInit();
      });
    },
    deleteInit() {
      this.right.list = [];
      this.right.selectIds = [];
      for (let i in this.left.list) {
        let u = this.left.list[i];
        u.checked = false;
      }
      this.controlCheckAll();
    },
    handleCheckAllChange(val) {
      //0006左边全选全不选时
      //1全选全不选
      for (let i in this.searchDataLeft) {
        let s = this.searchDataLeft[i];
        s.checked = val;
      }
      if (val == true) {
        //2全选时 去重push进去(获取左边数组在右边中没有的项)
        var arr = [];
        for (var i = 0; i < this.searchDataLeft.length; i++) {
          var obj = this.searchDataLeft[i];
          var leftid = obj.userId;
          var isExist = false;
          for (var j = 0; j < this.right.list.length; j++) {
            var obj2 = this.right.list[j];
            var rightid = obj2.userId;
            if (leftid == rightid) {
              isExist = true;
              break;
            }
          }
          if (!isExist) {
            arr.push(obj);
          }
        }
        this.right.list = this.right.list.concat(arr);
        for (var i = 0; i < arr.length; i++) {
          this.right.selectIds.push(arr[i].userId);
        }
      } else {
        //全不选时(取出右边数组中在左边数组存在的项)

        let formArr = [];
        for (let i = 0; i < this.right.list.length; i++) {
          var rightid = this.right.list[i].userId;
          var isExist = false;
          for (let j = 0; j < this.searchDataLeft.length; j++) {
            if (rightid == this.searchDataLeft[j].userId) {
              isExist = true;
            }
          }
          if (isExist == false) {
            formArr.push(this.right.list[i]);
          }
        }
        this.right.list = formArr;
        var arr2 = [];
        for (var i = 0; i < formArr.length; i++) {
          arr2.push(formArr[i].userId);
        }
        this.right.selectIds = arr2;
      }
    },
    openLayer() {
      this.deleteInit(); //清空选中列表
      //打开弹窗
      this.shareBox = true;
      this.getInfo();
    },

    // //   **********0004穿梭框结束***************
    loadDetails() {
      let me = this;
      let url = "";
      let param = {};
      if (this.type == "send") {
        url = "/send/notice/manage/query/detail";
        param = { noticeId: this.id, year: this.year };
      }
      if (this.type == "receive") {
        url = "/receive/notice/manage/query/detail";
        param = { noticeUserId: this.id, year: this.year };
      }
      me.$ajax
        .post(url, param)
        .then(out => {
          me.hw_result(out.data, true, me, () => {
            var data = out.data.result;
            this.detail = data;
          });
        })
        .catch(error => {});
    },
    setheight: function() {
      let me = this;
      let thisheight = window.getComputedStyle(me.$refs.mianHeight).height;
      let scHeight = parseInt(thisheight) - 280 + "px";
      me.scHeight = scHeight;
    },
    sendMessage() {
      this.newNoticeUserMap=[];
      //转发
      for (let i in this.right.list) {
        var map = this.right.list[i];
        let json = {
          userId: map.userId,
          userName: map.userName,
          userDeptId: map.deptId,
          userDeptName: map.deptName,
          deptOrgId: map.unitId,
          deptOrgName: map.unitName
        };
        this.newNoticeUserMap.push(json);
      }
      for (let i in this.detail.fileInfos) {
        this.newFileInfos.push(this.detail.fileInfos[i].fileName);
      }
      let fileUrl = "";
      if (this.detail.fileInfos.length != 0) {
        fileUrl = this.detail.fileInfos[0].fileUrl;
      }
      if(this.newNoticeUserMap.length == 0){
        this.hw_warn("请选择转发人员！");
        return false;
      }
      let param = {
        title: this.detail.title,
        typeId: this.detail.typeId,
        noticeImportance: this.detail.noticeImportance,
        noticeUsers: this.newNoticeUserMap,
        content: this.detail.content,
        shareNoticeId: this.detail.noticeId,
        shareNoticeDate: this.detail.pubTime,
        fileUrl: fileUrl,
        fileNames: this.newFileInfos
      };

      this.submitflag = true;
      let url = "/notice/manage/forwarding";
      this.$ajax
        .post(url, this.bean("noticeBean", param))
        .then(out => {
          this.hw_result(out.data, true, this, () => {
            this.hw_success("转发成功");
            this.submitflag = false;
            this.shareBox = false;
          });
        })
        .catch(error => {
          this.submitflag = false;
        });
    },
    download(item) {
      var myurl = this.detail.moduleUrl + item.fileUrl + item.fileName;

      window.open(myurl);
    },
    detail_delete() {
      this.hw_confirm("您确定要删除吗？", () => {
        let url = "";
        let param = {};
        if (this.type == "send") {
          url = "/send/notice/manage/delete";
          param = { noticeId: this.id, year: this.year };
        }
        if (this.type == "receive") {
          url = "/receive/notice/manage/delete";
          param = { noticeUserId: this.id, year: this.year };
        }
        this.$ajax
          .post(url, param)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              this.hw_success("删除成功");
              var that = this;
              setTimeout(function() {
                if (that.type == "send") {
                  that.$router.push({ name: "outbox" });
                }
                if (that.type == "receive") {
                  that.$router.push({ name: "inbox" });
                }
              }, 1000);
            });
          })
          .catch(error => {});
      });
      return false;
    },
    backToTop() {
      // document.getElementById("messageBoxN").scrollTo(0, 0);
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.getElementById("messageBoxN").scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    scrollToTop() {
      let that = this;
      let scrollTop = document.getElementById("messageBoxN").scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.topFlag = true;
      } else {
        that.topFlag = false;
      }
    }
  },
  mounted() {
    this.id = localStorage.getItem("boxId");
    this.setheight();
    this.loadDetails();
    this.getJumpLink();
    document
      .getElementById("messageBoxN")
      .addEventListener("scroll", this.scrollToTop);
  },
  destroyed(){
    localStorage.removeItem("boxId");
  }
};
</script>

<style>
</style>
